<script src="https://unpkg.com/vue@next"></script>
<!-- iview -->
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">

<!-- vxe-table -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>



   <p>
      <vxe-switch v-model="demo1.value1"></vxe-switch>
      <vxe-switch v-model="demo1.value2" size="medium"></vxe-switch>
      <vxe-switch v-model="demo1.value3" size="small"></vxe-switch>
      <vxe-switch v-model="demo1.value4" size="mini"></vxe-switch>
    </p>



<script>
import _XEUtils_ from 'xe-utils'
import { defineComponent, reactive } from 'vue'
  export default defineComponent({
        setup  () {
          const demo1 = reactive({
            value1: null,
            value2: null,
            value3: null,
            value4: null,
            value5: true,
            value6: null,
            value7: null,
            value8: null,
            value9: 'Y',
            value10: 1,
            value11: false,
            value12: true,
            value13: false,
            value14: false,
            value15: true,
            value16: false,
            value17: false
          })
          return {
            demo1
          }
        }
      })
  </script>
